<template>
	<!-- <view class="main-class"> -->
	<z-paging ref="paging" v-model="orderData" @query="queryList" >
		<template #top>	
		<tn-sticky>
			<view class="header-class tn-flex justify-end" >
				<view class="status_bar" style="height: var(--status-bar-height); width: 100%; "></view>			
				<tn-navbar height="45px" back-icon=""  home-icon="left" :bottom-shadow = "false" bg-color="tn-type-primary_bg" text-color="tn-white" >待审批发票 </tn-navbar>
			<tn-search-box
				v-model="searchValue"
				@input="searchInputEvent"
				@search="searchBtnClickEventPage"
				size="sm"
				placeholder="搜索关键词,检索客户"
				placeholder-icon="search"
				border-color="#FFFFFF"
				text-color="#FFFFFF"
				placeholder-color="#FFFFFF"
				class="search-class tn-m-sm tn-text-bold"
				search-button-bg-color="#6bb7ec"
				shape="round"
				/>
			</view>
			<view class="tn-p tn-text-xl tn-white_bg" @click="openCalendarPopup">
				日期范围：{{dataInfo.startDate}} 至 {{dataInfo.endDate}}
			</view>
		</tn-sticky>
		</template>
		<hr/>
		<view class="tn-pl tn-pr tn-radius tn-pb">
			<view class="tn-shadow-md tn-pl-sm tn-pt-sm tn-pb-sm"  v-for="(item, index) in orderData">
				<view class="tn-flex-row tn-pt-xs" @click="toNavigate(item)">
					<view class="tn-w-3-4 tn-text-xl tn-text-ellipsis-2 tn-pr-xs">
						{{item.businessname}}
					</view>
					<view class="tn-w-1-4 tn-red_text tn-text-xl tn-text-bold">
						{{item.orderstate}}
					</view>	
				</view>
				<view class="tn-pt-xs tn-flex-row" @click="toNavigate(item)">
					<view class="tn-w-3-5">
						{{item.billcode}}
					</view>	
					<view class="tn-w-2-5">
						{{item.dates}}
					</view>
					
				</view>
				<view class="tn-pt-xs tn-flex-row" @click="toNavigate(item)">
					<view class="tn-w-3-5 tn-text-xl tn-red_text">
						单据数：{{item.ordernum}}
					</view>
					<view class="tn-w-2-5 tn-red_text tn-text-xl">
						金额：{{item.taxamount}}
					</view>	
				</view>
				<view class="tn-pt-xs tn-red_text tn-text-xl" @click="toNavigate(item)">
					操作员：{{item.caozyname}}
				</view>
				<view class="tn-pt-xs" @click="toNavigate(item)">
					备注：{{item.remark}}
				</view>
			</view>
		</view>
	</z-paging>
	<!-- </view> -->
	
	
	
	<tn-popup v-model="showCalendarPopup" open-direction="top">
	  <view class="tn-pt">
	    <tn-calendar v-model="selectDate" min-date="2024-01-01" mode="range" class="calendar-class" />
	  </view> 
	  <view class="tn-mt tn-w-full tn-pb">
	    <tn-button
	      font-size="36"
	      custom-class="popup-calendar-button"
	      @click="closeCalendarPopupPage"
	    >
	      选择所选日期
	    </tn-button>
	  </view>
	</tn-popup>
	
</template>

<script setup>
	import { ref,reactive,onMounted } from 'vue'
	import { postCall  } from '@/api/index.js'
	import { EventBus } from '@/mitt/EventBus.js';
	import { toastMessage } from '@/utils/toast.js'
	import { createParams } from '@/utils/utils.js'
	import md5 from "js-md5";
	import dayjs from "dayjs";
	import Big from 'big.js';
	
	const procName = "PROC_APP_DO_INVOICE";
	const selectDate = ref('')
	const searchValue = ref("")
	const currentSwiperIndex = ref(1)
	const currentTabsIndex = ref(0)
	const userInfo = reactive({});
	let index = 0;
	const showCalendarPopup = ref(false)
	
	const openCalendarPopup = () => {
	  showCalendarPopup.value = true
	}
	
	let back = (val) =>{
		uni.navigateTo({
			url: '/pages/index/index'
		})
		return true;
	}
	
	const paging = ref(null)
	
	let pageInfo = {
		P_PAGE : 1 ,
		P_PAGESIZE : 10
	}
	
	const  queryList = (pageNo, pageSize) =>{
		pageInfo.P_PAGE = pageNo;
		pageInfo.P_PAGESIZE = pageSize;	
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "UNEND";
		params["P_CON"] = searchValue.value;
		postCall(Object.assign(Object.assign(params,createParams(dataInfo)),pageInfo)).then(res=>{
			if(res){
				if(res.code===200 || res.code===1000){
							   // Object.assign(orderData,res.data.DATASET);	   
							   // console.log(statusData);
							   paging.value.complete(res.data.DATASET);
				}
			}
		   
		}).catch(res =>{
			paging.value.complete(false);
		})
	}
	
	const searchBtnClickEventPage = () =>{
		paging.value.reload();
	}
	
	const closeCalendarPopupPage = () =>{
		showCalendarPopup.value = false
		let date = {
						"startDate":dayjs(selectDate.value[0]).format('YYYY-MM-DD'),
						"endDate":dayjs(selectDate.value[1]).format('YYYY-MM-DD')
					}
		Object.assign(dataInfo,date);
		paging.value.reload();
	}
	
	
	const closeCalendarPopup = () => {
	  showCalendarPopup.value = false
	  console.log(selectDate.value);
	  let date = {
	  				"startDate":dayjs(selectDate.value[0]).format('YYYY-MM-DD'),
	  				"endDate":dayjs(selectDate.value[1]).format('YYYY-MM-DD')
	  			}
	   Object.assign(dataInfo,date);
	   doGetOrder();
	}
	
	const searchInputEvent = ()=>{
		
	}
	const searchBtnClickEvent = ()=>{
		
	}
	const dataInfo = reactive({"startDate":"2024-01-01","endDate":"2024-04-31"})
	let loginInfo = {};
	
	onMounted(()=>{
		loginInfo = uni.getStorageSync("LOGINUSER");
		const firstDayOfMonth = dayjs().startOf('month');
		let date = {
						"startDate":firstDayOfMonth.format('YYYY-MM-DD'),
						"endDate":dayjs().format("YYYY-MM-DD")
					}
		Object.assign(dataInfo,date);
		index = 0;
		// doGetOrder();
	})
	const statusData = reactive([])
	
	const orderData = ref([]);
	const doGetOrder = (val) =>{
		
		console.log(currentTabsIndex.value);
		orderData.length = 0;
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "UNEND";
		postCall(Object.assign(params,createParams(dataInfo))).then(res=>{
			if(res){
				if(res.code===200){
							   Object.assign(orderData,res.data.DATASET);	   
							   // console.log(statusData);
				}
			}
		  
		})
	}
	
	let toNavigate = (val) =>{
		let tempOrderData  = [];
		let convertOrderData = [];
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "DETAIL";
		params["P_BILLNO"] = val.billno;
		postCall(params).then(res=>{
			if(res){
				if(res.code===200){
				   Object.assign(tempOrderData,res.data.DATASET);	   
				   // console.log(statusData);
				   const mergedData = tempOrderData.reduce((acc, cur) => {
					   const { billno,billcode, businessname,recemanname,address,recetelephone,caozyname,kdcode,body,accesstoken,tradeid,remark, ...rest } = cur;
					   if (!acc[billcode]) {
						   acc[billcode] = { billno,billcode, businessname,recemanname,address,recetelephone,caozyname,kdcode,body,accesstoken,tradeid,remark, details: [rest] };
					   } else {
						   acc[billcode].details.push(rest);
					   }
					   return acc;
				   }, {});
				   
				   const businessStats = {};
				   for (const key in mergedData) {
					   const business = mergedData[key];
					   const totalPrice = business.details.reduce((total, item) => new Big(total).plus(new Big(item.sumtaxamount)), 0);
							mergedData[key]["taxamount"] = totalPrice;
					   }
					for (const key in mergedData) {
						if (Object.hasOwnProperty.call(mergedData, key)) {

						   convertOrderData.push(mergedData[key]);
						}
					 }
		
					uni.setStorageSync("ORDERINFO",convertOrderData[0]) 
					uni.navigateTo({
						url: '/pages/invoice/invoicedetails'
					})
				}
			}
		   
		})
	}
	
</script>

<style scoped>
.header-class{
	height: 17vh !important;
	flex-direction: column
}
.form-class{
	width: 90vw;
	margin-left: 5vw;
}
.button-class{
	margin-top: 5vh;
	width: 90vw;
	border-radius: 40px !important;
	/* color: #FFFFFF !important; */
	background: linear-gradient(to right,  #47e8be,#3379dc);
	/* border: 0px solid rgba(0, 0, 0, 0.2) !important; */
}

.button-class::after{
	border: 0px solid rgba(0, 0, 0, 0.2) !important;
}

.calendar-class{
	/* height: 35vh; */
	height: 100% !important;
	margin-top: 5vh;
}

.popup-calendar-button {
  margin: 0rpx 30rpx;
  width: calc(100% - 60rpx) !important;
  padding: 20rpx 30rpx !important;
}

.no-data-class{
	
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 10vh;
}
</style>
